Using HomeSite Previous Up One Level Next
Chapter 4  Learning HTML and CSS



Creating a Style Block

To keep things simple, we'll use embedded styles instead of creating a separate style sheet file. Start by opening the file /tutorial files/tour2.htm and reviewing the HTML code. You will notice that most of the attribute code from tour.htm has been removed, leaving just the structural elements -- <BODY>, <P>, <H1>, <TABLE>, <UL> -- and some formatted content. This an essential first step in moving to the new formatting method.

To make it easier to follow along, the stripped attributes are shown in code comments above each tag on the page. The browser skips these comments when rendering the page, so the code contained in them will not affect the formatting.

Click the Browse tab to see what the page looks like at this point.

We'll begin by entering a <STYLE> block in the <HEAD> section of the document. We will then open TopStyle and work our way through the page code and insert the new style rules when they are completed.

Note To add a style block to a document:
  1. Enter <STYLE></STYLE> tags just above the </HEAD> tag in the tour2.htm file.
  2. Click the Style Editor button on the Tools toolbar.

HomeSite uses the TopStyle Lite CSS editor from Bradbury Software. It has a specialized interface to makes creating and editing style sheets easy. The online Help is a good resource for learning about TopStyle features and CSS.

Defining styles

We are now ready to create our style rules.

BODY formatting

Note To add BODY properties:
  1. In TopStyle, click the New Selector button on the toolbar to open the New Selector dialog.

  2. Select BODY from the HTML Element list and click OK.
  3. Click background-image in the Style Inspector Property list.
  4. Open the drop-down Value list and click Select URL.
  5. Double-click the file \tutorial files\image1.jpg to add it to the BODY selector.
  6. Scroll down the Property list to the Color property and select Green from the drop-down Value list.

This completes the BODY properties style. No change is needed to the <BODY> tag in the document.

Bold formatting, with class!

Standard HTML uses tags such as <B>, <EM>, and <STRONG> to highlight text. With styles, you set special formatting for words (or characters) by enclosing them in the <SPAN></SPAN> tag and applying styles. For formatting paragraphs and larger content blocks, use the <DIV></DIV> tag.

We might want to use bold formatting in different situations, not attached to a particular selector, so we'll define a class for the bold property that can be applied wherever we need it. Classes can stand alone or be part of a selector. We'll explore their use in several sections of the page.

Note To create a standalone class:
  1. Click the New Selector button.
  2. Select (none) from the HTML Element list.
  3. Click the Class button, type the word bold in the text box, and click OK.

    The bold class displays in the style list.

  4. Click font-weight in the Property list.
  5. Select bold from the Value list.

    The style can now be applied in the document.

  6. In the tour_style file, enter the style code so that the line reads "This page was created with <SPAN class="bold">HomeSite</SPAN>, which you can find at..."

Anchor formatting

You can set properties for the A selector, such as colors for active and visited links, but we'll just accept the browser defaults.

Image formatting

This image link does not require a style.

Heading formatting

The Heading 1 tag uses the default font size set by the browser and inherits the font color value from the BODY style.

Horizontal Rule formatting

Note To add horizontal rule properties:
  1. Click the New Selector button.
  2. Select HR from the HTML Element list and click OK.
  3. Select the width property and type in the value 80%.
  4. Select the color property and the value black.

No change is needed in the <HR> tag in the document.

Line Break formatting

The Line Break tag does not take styles.

Paragraph formatting

You could set a single paragraph style for an entire site, but the real power of styles is that they make it possible to create and apply a virtually unlimited library of design ideas, through the use of classes.

For example, you could define individual paragraph classes for introductory text, important notes, and contact information. Setting font faces, colors, and alignment for each of these content types would enhance the look of the site and make it easier for visitors to find what they are looking for.

As we saw in the bold formatting procedure above, we can create a standalone class and apply to different selectors. Here, we'll create a class just for the <P> tag.

Note To create a special paragraph style:
  1. Click the New Selector button.
  2. Select P from the HTML Element list.
  3. Click the Class button, type "red" in the text box and click OK.

    The selector should now read "P.red".

  4. For the color property, select the value Red.
  5. For the text-align property, select the value center.
  6. For the font-family property, first select Font, then double-click Arial in the Font Builder dialog, and click OK.
  7. For the font-size property, select the value x-large.
  8. To apply the style to the paragraph in the document, just change the <P> tag to read "<P class="red">".

Let's take a break

At this point, you may be thinking that this is a lot of work to do for something you can just as easily do with tag attributes and you'd be right -- if we were only doing it for this page.

Cascading Style Sheets evolved as a response to the explosion of Internet content and the demand for a technology that enables the creation and maintenance of sites that contain lots of pages and complex page layout schemes.

Style sheets are a Web designer's dream because they allow you to make rapid and dramatic changes to all the HTML elements in a site. That means you can preview text, color, and layout designs by simply editing their styles.

Another advantage of formatting pages with style sheets is that by reducing the amount of code required to format each page, the pages can be downloaded and read by the browser more quickly.

An additional and very powerful capability is the use of scripts to manipulate styles and other document objects. The combination of styles, scripting, and HTML is known as Dynamic HTML (DHTML). If you want to work with DHTML, there are many print and Web references available on the subject.

As noted in the introduction to this tutorial, though, there are a number of browser inconsistencies that limit the full and unrestricted implementation of HTML elements, Cascading Style Sheets, and scripts. To prove it, just take a look at the completed tour_style.htm file in Netscape Navigator. You will need to be aware of how best to use these technologies in your site. It comes down to deciding which browsers and which browser versions you will support and then informing yourself about cross-browser design strategies.

As we continue with the tutorial, keep in mind that as great as style sheets can be, they come with some restrictions.

Table formatting

We'll complete this tutorial by applying styles to our page's most complex element, the table.

Note To add a table style:
  1. Click the New Selector button.
  2. Select TABLE from the HTML Element list.
  3. For the padding property, type in 3px and press Enter.
  4. For the border property, select thin.
  5. For the border-style property, select solid.

We'll leave the CELLSPACING attribute as is in the document. No changes are needed in the <TABLE> tag.

No styles are needed for the table row <TR> tag or for the first table data <TD> tag.

No styles are needed for the list elements or for the paragraph that follows.

This next procedure is somewhat lengthy because in steps 6-9 we apply styles to the cell borders that are not affected by the <TABLE> border properties. The method is rather crude but it spares us a discussion of style rules for tables, which is really beyond the scope of this tutorial. See the "Tables and Style Sheets" topic in the online HTML Reference for details.

Note To add a table data style:
  1. Click the New Selector button and select TD from the HTML Element list.
  2. Click the Class button, type the word top in the text box, and click OK.

    The TD.top style appears in the style list.

  3. For the text-align property, select center.
  4. For the font-weight property, select bold.

    Since all the text in the table cell is bold, we don't need to wrap it in a <SPAN> tag.

  5. For the background-color property, select Yellow.
  6. For the border-left-style property, select solid.
  7. For the border-left-width property, select thin.
  8. For the border-bottom-style property, select solid.
  9. For the border-bottom-width property, select thin.
  10. In the tour_style file, edit the cell code to read <TD class="top">.

We're almost done. We just need to define styles for the last table cell.

Note To add additional table data styles:
  1. Click the New Selector button and create a TD.bottom class.
  2. Apply the same text-align and font-weight properties as you did in TD.top.
  3. For the background-color property, select Lime.
  4. Apply the same border-left properties as you did in TD.top.
  5. In the tour_style file, edit cell code to read <TD class="bottom">.

Copyright © 2000, Allaire Corporation. All rights reserved. Previous Up Next